<template>
  <div class="q-pa-md q-gutter-y-md">
    <div class="q-gutter-sm">
      <t-chip>
        <t-avatar color="red" text-color="white">50</t-avatar>
        Emails
      </t-chip>
      <t-chip>
        <t-avatar>
          <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
        </t-avatar>
        John
      </t-chip>
    </div>

    <div class="q-gutter-x-sm">
      <t-btn round color="white">
        <t-avatar size="28px">
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg" />
        </t-avatar>
      </t-btn>
      <t-btn round color="white">
        <t-avatar size="32px">
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg" />
        </t-avatar>
      </t-btn>
      <t-btn round color="white">
        <t-avatar size="40px">
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg" />
        </t-avatar>
      </t-btn>
    </div>

    <t-item clickable v-ripple>
      <t-item-section side>
        <t-avatar rounded size="48px">
          <img src="https://cdn.quasar.dev/img/avatar.png" />
          <t-badge floating color="teal">new</t-badge>
        </t-avatar>
      </t-item-section>
      <t-item-section>
        <t-item-label>Mary</t-item-label>
        <t-item-label caption>2 new messages</t-item-label>
      </t-item-section>
      <t-item-section side> 3 min ago </t-item-section>
    </t-item>

    <t-banner rounded class="bg-primary text-white">
      <template v-slot:avatar>
        <t-avatar icon="signal_wifi_off" color="white" text-color="primary" />
      </template>

      You have lost connection to the internet. This app is offline.

      <template v-slot:action>
        <t-btn flat color="white" label="Turn ON Wifi" />
      </template>
    </t-banner>
  </div>
</template>
